<template>
  <el-pagination class="pt-2"
    layout="sizes,prev,pager,next,jumper,->,total"
      v-model="pager.page"
      @current-change="pageChange"
      @size-change="sizeChange"
      :total="total"
      :current-page="pager.page"
      :page-sizes="[2,5,10,20]"
      :page-size="pager.size"
      background
    >
  </el-pagination>
</template>

<script lang="ts">
import { defineComponent } from "@vue/runtime-core"
export default defineComponent({
  data() {
    return {
      total: 0,
      pager: {
        page: 1,
        size: 10,
      }
    }
  },
  props: {
    myPager: Object,
    myTotal: Number,
  },
  emits: ['myChange'],
  watch:{
    // 需要写在一起,利用data 延时渲染后 一起改变
    myPager: {
      deep: true,
      immediate: true,
      handler(val,oldVal) {
        // console.log('child pageer change' , val);
        this.pager = val
      }
    },
    myTotal (val,oldVal) {
      // console.log('child total change' , val);
      this.total = val
    },
  },
  methods: {
    // 需要处理page , size 联动问题
    sizeChange: function(size:number){
      // console.log('child size change' , size);
      this.pager.size = size
      this.pager.page = 1
      this.$emit('myChange',this.pager.page,size)
    },
    pageChange: function(page:number){
      // console.log('child page change' , page);
      this.pager.page = page
      this.$emit('myChange',page,this.pager.size)
    }
  }
})
</script>